<template>
    <view class="notice-page">
        <!-- 使用独立的导航栏组件 -->
        <navbar-component title="代取须知" right-text="" @goBack="goBack"></navbar-component>

        <!-- 页面内容 -->
        <view class="notice-content-wrapper">
            <p>任何问题可以联系我</p>
            <!-- 使用UniApp的image组件替代HTML的img标签 -->
            <image 
                :src="wxmImageSrc" 
                mode="widthFix" 
                class="notice-content-wrapper-img" 
                @error="onImageError"
                @load="onImageLoad"
            ></image>
        </view>
    </view>
</template>

<script>
import '../csspages/notice.css';
import { getImagePath } from '@/utils/common/method';
import NavbarComponent from '../../zujian/navbar.vue';
import { ref, onMounted } from 'vue';
export default {
    name: 'Notice',
    components: {
        NavbarComponent
    },
    setup() {
        const wxmImageSrc = ref('');
        
        onMounted(() => {
            // 直接使用绝对路径，避免路径解析问题
            wxmImageSrc.value = '/static/images/img/wxm.jpg';
            console.log('设置图片路径:', wxmImageSrc.value);
        })
        
        const goBack = () => {
            uni.navigateBack();
        }
        
        const onImageError = (e) => {
            console.error('图片加载失败:', e);
            // 尝试使用备用路径
            if (wxmImageSrc.value !== '/static/images/img/wxm.jpg') {
                wxmImageSrc.value = '/static/images/img/wxm.jpg';
            } else {
                // 如果备用路径也失败，显示错误提示
                uni.showToast({
                    title: '图片加载失败',
                    icon: 'none'
                });
            }
        }
        
        const onImageLoad = () => {
            console.log('图片加载成功');
        }
        
        return {
            wxmImageSrc,
            goBack,
            onImageError,
            onImageLoad
        }
    },

}
</script>

<style lang="scss">
.notice-page {
    width: 100%;
    height: 100%;
}

.notice-content-wrapper {
    padding: 10px;
}

.notice-content-wrapper-img {
    width: 100%;
    height: 100%;
    padding: 5px 0px;
    box-sizing: border-box;
}
</style>